<template>
  <KDialog
    v-model="visible"
    width="xs"
    cancel-text="关闭"
    confirm-text="保存图片"
    :show-confirm-btn="!isExpire"
    :show-close="false"
    @submit="onClickSubmit"
    @cancel="onclickCancel"
  >
    <div class="flex">
      <img
        v-if="isExpire"
        src="@/assets/images/qr_code.png"
        alt=""
        class="code"
      />
      <img v-else :src="urlStr" alt="" class="code" />
    </div>
    <div v-if="isExpire" class="text">该渠道码已过期</div>
  </KDialog>
</template>

<script setup lang='ts'>
import { computed } from 'vue';
import { KDialog } from '@/components/k-dialog';
import { DownloadService } from '@/services/http';
defineOptions({
  name: 'QrCode'
});
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  isExpire: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ''
  }
});
const urlStr = computed(() => props.url);
const emits = defineEmits(['update:model-value']);
const visible = computed({
  get() {
    return props.modelValue;
  },
  set(val: boolean) {
    emits('update:model-value', val);
  }
});
const onClickSubmit= async () => {
  await DownloadService.downloadImage(urlStr.value);
  visible.value = false;
};
const onclickCancel= (data: any) => {
  visible.value = false;
};
</script>

<style lang="scss" scoped>
.code {
  width: 164px;
  height: 164px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text {
  margin-top: 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #000;
  text-align: center;
}
</style>
